<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS_伪类选择器结构伪类1</title>
  <style>
      /*查找div元素的所有子代元素中排行为第一个的p元素*/
      div>p:first-child{
          color: red;
      }
      div>span:first-child{
          color: red;
      }
      /*查找div元素的所有子代元素中排行为最后一个的p元素*/
      div>p:last-child{
          color: blue;
      }
      /*查找div元素的所有子代元素中排行第n个p元素   其中这个n是一个计算公式  可以写成 an+b*/
      div>p:nth-child(0n + 3){
          color: yellow;
      }
  </style>
</head>
<body>
<!--  注意所有是以child结尾的这个都是所有的子元素参与排序 从1开始-->
    <div>
        <span>孙七：100</span>   <!--div子元素排行1-->
        <p>张三：90</p>          <!--div子元素排行2-->
        <p>李四：80</p>          <!--div子元素排行3-->
        <p>王五：70</p>          <!--div子元素排行4-->
        <p>赵六：60</p>          <!--div子元素排行5-->
        <span>赵六：60</span>    <!--div子元素排行7-->
    </div>
</body>
</html>